<template>
  <div class="detailPageCss">
    <div class="titleCss">{{ $route.query.status == 0 ? '整改意见书下发' : '查看整改材料' }}</div>
    <div class="bodyCss">
      <el-form ref="form" :model="formData" label-width="140px">
        <el-row>
          <el-form-item label="医疗机构名称：">
            <el-input v-model="formData.data1" placeholder="请输入" readonly></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="机构代码：">
            <el-input v-model="formData.data2" placeholder="请输入" readonly></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="整改意见书：">
            <el-upload
              :disabled="$route.query.status == 1"
              :file-list="fileList"
              class="upload-demo"
              ref="upload"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :multiple="true">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>
      <template v-if="$route.query.status == 0">
        <el-button type="primary" @click="confirmBtn">确认</el-button>
      </template>
      <template v-else>
        <el-button type="primary" @click="passBtn">整改通过</el-button>
        <el-button type="danger" @click="notPassBtn">整改驳回</el-button>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      formData:{
        data1:'【测试数据】xxxxxxx医院',
        data2:'【测试数据】xxxxxxx代码',
        data3:null,
      },
      fileList: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }]
    }
  },
  mounted(){
    
  },
  methods:{
    notPassBtn(){
      
    },
    passBtn(){
      
    },
    confirmBtn(){
      this.$router.back()
    },
    goBackBtn(){
      this.$router.back()
    },
  },
}
</script>

<style lang="scss" scoped>
.detailPageCss{
  overflow: hidden;
  position: relative;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  height: calc( 100vh - 66px - 40px);
  display: flex;
  flex-direction: column;
  .titleCss{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .bodyCss{
    margin-top: 40px;
    width: 500px;
    margin-left: 50%;
    transform: translateX( calc( -50% - 70px ));
  }
  .bottomBtnCss{
    margin-top: auto;
    text-align: right;
  }
}
</style>